<template>
  <div class="appcontainer dashboard">
    <div class="main">
      <div class="banner">
        <div class="img">
          <div class="text">
            <p class="title">欢迎登陆{{$globalData.title}}</p>
            <p class="loginTime">{{ `上次登录时间： ` + loginTime }}</p>
          </div>
          <el-image
            style="width: 100%; min-width: 600px; height: 266px"
            fit="cover"
            :src="imgs.index_banner"
            alt
          />
        </div>
        <div class="detailTime">          
          <!-- <span class="lunarTime">{{ lunarTime }}</span> -->
        </div>
      </div>

      <div class="dataLists">
        <StatWidget :title="'提醒数'" :num="'222'" :color="'blue'" >
          <Bell></Bell>
        </StatWidget>
        <StatWidget :title="'书籍'" :num="'10'" :color="'red'" >
          <Notebook></Notebook>
        </StatWidget>
        <StatWidget :title="'购物数'" :num="'222'" :color="'yellow'" >
          <ShoppingBag></ShoppingBag>
        </StatWidget>
        <StatWidget :title="'人员'" :num="'1'" :color="'green'" >
          <User></User>
        </StatWidget>
        <StatWidget :title="'增长'" :num="'10%'" :color="'grey'" >
          <Sunrise></Sunrise>
        </StatWidget>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { useStore,mapGetters } from 'vuex'
import { computed } from 'vue'

import { checkServer } from "@/manager-core/api/login/login"
import { myMixin } from "@/manager-core/mixin/"

import { StatWidget} from "@/manager-core/component/widget"

import { Bell,Notebook,ShoppingBag,User,Sunrise } from '@element-plus/icons'


export default defineComponent({
  name: 'Dashboard',
  components: {    
    StatWidget,Bell,Notebook,ShoppingBag,User,Sunrise
  },

  mixins: [myMixin],

  data(){
    return {
      imgs: {
         index_banner: "/static/manager3/img/index_banner.png",
      },
      loginTime: "2021-9-14",
      lunarTime: "辛丑年八月初八",
      attrs: [
        {
           key: "today",
           dates: new Date(),
           highlight: true,
           popover: {
            // label: "美好的一天！要开心呦！",
            }
        }
      ]
    }
  },

  methods:{
    dateManage(res: any) {
      var dataee = new Date(res).toJSON();
      var birthDay = new Date(+new Date(dataee) + 8 * 3600 * 1000)
        .toISOString()
        .replace(/T/g, " ")
        .replace(/\.[\d]{3}Z/, "");
      // return birthDay.substring(0, 10);
      return birthDay;
    }
  },

  computed:{

  },

  mounted(){
    console.log("on mounted Header")
  },

  created(){

  },


  setup(){    

  }


})



</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.appcontainer {
  width: 100%;
  background: #f0f2f5;
  padding-bottom: 50px;
  .main {
    margin-left: 24px;
    margin-right: 24px;    
    min-width: 1200px;
    .banner {
      display: flex;
      justify-content: space-around;
      align-items: center;
      .img {
        @extend .banner;
        .title {
          width: 360px;
          font-size: 32px;
          font-weight: 500;
          color: #12121d;
        }
        .loginTime {
          font-size: 16px;
          font-weight: 400;
          color: rgba(0, 0, 0, 0.5);
        }
      }
      .detailTime {
        display: flex;
        flex-direction: column;
        position: relative;
        margin: 0 0 0 20px;
        .calendar {
          padding: 0 0 20px 0;
        }
        .lunarTime {
          position: absolute;
          bottom: 10px;
          left: calc(20%);
        }
      }
    }
    .dataLists {
      display: flex;
      flex-wrap: wrap;
      // justify-content: space-around;
      margin: 24px 0 0;
      .dataList {
        width: 260px;
        height: 182px;
        opacity: 1;
        background: #ffffff;
        margin: 24px 31px 0 0;

        &:nth-child(1) {
          border-left: 8px solid #67c23a;
        }
        &:nth-child(2) {
          border-left: 8px solid #909399;
        }
        &:nth-child(3) {
          border-left: 8px solid #e6a23c;
        }
        &:nth-child(4) {
          border-left: 8px solid #409eff;
        }
        &:nth-child(5) {
          border-left: 8px solid #909399;
        }
        &:nth-child(6) {
          border-left: 8px solid #67c23a;
        }
        &:nth-child(7) {
          border-left: 8px solid #e6a23c;
        }

        .title {
          font-size: 14px;
          font-weight: 400;
          color: rgba(0, 0, 0, 0.85);
          margin: 36px 0 0 28px;
        }
        .info {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin: 36px 28px 0;
          .num {
            font-size: 36px;
            font-weight: 400;
            color: #12121d;
          }
        }
      }
    }
  }
}

</style>
